<template>
	<view class="content">
		<view class="bcg">
			<view class="title">青岛俊功新型建材</view>
			<view class="content_swipe">
				<swiper class="swiper" 
				:indicator-dots='true' 
				indicator-color='#EEEEEE'
				indicator-active-color="#ffffff"
				circular 
				:autoplay="true"
				interval="3000" 
				duration="1000">
					<swiper-item class="swipe-i" v-for="(item,index) in swiperList" :key="index">
						<image :src="item.images" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="img_flex">
					<view class="items">
						<image src="../../static/icon1.png" mode=""></image>
						<view class="text">抗压耐磨</view>
					</view>
					<view class="items">
						<image src="../../static/icon1.png" mode=""></image>
						<view class="text">品质可靠</view>
					</view>
					<view class="items">
						<image src="../../static/icon1.png" mode=""></image>
						<view class="text">货源充足</view>
					</view>
				</view>
			</view>
			<view class="content_2" v-for="(item,index) in shopList" :key="index">
				<view class="con_img">
					<image :src="item.productImage" mode=""></image>
				</view>
				<view class="con_flex">
					<view class="tex_l">{{item.productName}}</view>
					<view class="tex_r"><span>￥</span>{{item.productPrice}}</view>
				</view>
				<view class="btn" @click="goOrder(item)">
					立即下单
				</view>
			</view>
			<view class="" style="height: 180rpx;"></view>
		</view>

	</view>
</template>

<script>
	import {
		getBanner,getShoplist
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				statusBarHeight: uni.getStorageSync('heights'),
				swiperList:[],
				shopList:[],
				params:{
					pageNum:1,
					pageSize:5
				}
				
			}
		},
		onLoad() {
			this.getswiperList()
			this.getlist()
		},
		// onShow() {
		// 	this.shopList = []
		// },
		methods: {
			onReachBottom(){
				this.params.pageNum ++ 
				this.getlist()
			},
			getswiperList(){
				getBanner().then(res=>{
					if(res.code == 200){
						this.swiperList = res.rows
					}
				})
			},
			getlist(){
				getShoplist(this.params).then(res=>{
					if(res.code == 200){
						this.shopList.push(...res.rows)
					}
				})
			},
			goOrder(item){
				uni.navigateTo({
					url:`/pages/index/paymentOrder?info=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.bcg {
		width: 750rpx;
		height: 450rpx;
		background: linear-gradient(#598DFE 0%, #F6F6F6 100%);
	}
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-top: 40rpx;
		margin-left: 24rpx;
	}

	.content_swipe {
		width: 702rpx;
		margin: 44rpx auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		.swipe-i{
			width: 100%;
			height: 340rpx;
			border-radius: 10rpx;
			image{
				width: 100%;
				height:340rpx;
				border-radius: 10rpx;
			}
		}
		.img_flex{
			display: flex;
			height: 64rpx;
			align-items: center;
			justify-content: space-around;
			.items{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				.text{
					font-weight: 400;
					font-size: 26rpx;
					color: #A3A3A3;
					line-height: 30rpx;
				}
			}
		}
	}
	.content_2{
		width: 702rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.con_img{
			width: 100%;
			height: 306rpx;
			image{
				width: 100%;
				height: 306rpx;
				border-radius: 30rpx;
			}
		}
		.con_flex{
			margin: 22rpx 0rpx;
			display: flex;
			justify-content: space-between;
			.tex_l{
				font-weight: bold;
				font-size: 32rpx;
				color: #282828;
				line-height: 38rpx;
			}
			.tex_r{
				font-weight: bold;
				font-size: 36rpx;
				color: #FF4800;
				line-height: 26rpx;
				span{
					font-size: 24rpx;
				}
			}

		}
		.btn{
			width: 100%;
			height: 78rpx;
			background: linear-gradient( #5070E9 0%, #598DFD 100%);
			border-radius: 39rpx;
			text-align: center;
			line-height: 78rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>